<template>
    <div class="ant_layout">
        <!-- 左侧边栏 -->
        <div class="layout_sider">
            <div class="sider_opertors">
                <a-button size="small" type="primary">新增</a-button>
                <a-button size="small" type="primary">修改</a-button>
                <a-button size="small" type="primary">删除</a-button>
                <a-button size="small" type="primary">展开</a-button>
            </div>
            <!-- 文件树 -->
            <div style="margin-top: 15px">
                <DataTree />
            </div>
        </div>

        <!-- 主体 -->
        <div class="layout_content">
            <!-- 顶部按钮 -->
            <div class="content_opertors">
                <a-button type="primary" @click="">查询</a-button>
                <a-button type="primary" @click="">锁定/解锁</a-button>
                <a-button type="primary" @click="">取数</a-button>
                <a-button type="primary" @click="">详情</a-button>
            </div>

            <div class="content_main">
                <div class="content_table">
                    <!-- 表格区域 -->
                    <div id="luckysheet_main" style="margin: 0px; padding: 0px"></div>
                    <!-- 文件属性+表格行属性区域 -->
                    <!-- <DescCard :descInfo="descInfo" :isDisabled="true" /> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import DataTree from './Component/DataTree.vue';
import { onMounted } from 'vue';
// 初始化首页表格
const initGrid = () => {
    var options = {
        container: 'luckysheet_main', //luckysheet为容器id
        lang: 'zh',
        gridKey: '12',
        allowEdit: true, // 是否允许前台编辑
        showtoolbar: true, // 是否显示工具栏
        showinfobar: false, // 是否显示顶部信息栏
        sheetFormulaBar: true, // 是否显示公式栏
        showsheetbarConfig: {
            add: false, //新增sheet
            menu: false, //sheet管理菜单
            sheet: true, //sheet页显示
        },
        sheetRightClickConfig: {
            delete: false, // 删除
            copy: false, // 复制
            rename: false, //重命名
            color: false, //更改颜色
            hide: false, //隐藏，取消隐藏
            move: false, //向左移，向右移
        },
        pager: {
            pageIndex: 1, //当前的页码
            pageSize: 10, //每页显示多少行数据
            total: 50, //数据总行数
            selectOption: [10, 20], //允许设置每页行数的选项
        },
        hook: {
            rangeSelect: function (sheet, range) {
                // console.log(sheet)
                // console.log(range)
            },
            sheetActivate: function (index, isPivotInitial, isNewSheet) {
                // luckysheet.setSheetActive(1) // 手动激活指定sheet页
                // luckysheet.getSheet(index).name
                console.info(index, isPivotInitial, isNewSheet);
            },
            workbookCreateAfter: function () {
                // luckysheet.setBothFrozen(false);
            },
        },
        data: [
            {
                name: 'Cell', //工作表名称
                color: '', //工作表颜色
                index: 0, //工作表索引
                status: 1, //激活状态
                order: 0, //工作表的下标
                hide: 0, //是否隐藏
                row: 36, //行数
                column: 18, //列数
                defaultRowHeight: 19, //自定义行高
                defaultColWidth: 73, //自定义列宽
                celldata: [
                    {
                        r: 0,
                        c: 0,
                        v: {
                            ct: { fa: 'General', t: 'g' },
                            m: 'value1',
                            v: 'value1',
                        },
                    },
                    {
                        r: 0,
                        c: 1,
                        v: {
                            ct: { fa: 'General', t: 'g' },
                            m: 'value2',
                            v: 'value2',
                        },
                    },
                ], //初始化使用的单元格数据
                config: {
                    merge: {}, //合并单元格
                    rowlen: {}, //表格行高
                    columnlen: {}, //表格列宽
                    rowhidden: {}, //隐藏行
                    colhidden: {}, //隐藏列
                    borderInfo: {}, //边框
                    authority: {}, //工作表保护
                },
                scrollLeft: 0, //左右滚动条位置
                scrollTop: 0, //上下滚动条位置
                luckysheet_select_save: [], //选中的区域
                calcChain: [], //公式链
                isPivotTable: false, //是否数据透视表
                pivotTable: {}, //数据透视表设置
                filter_select: {}, //筛选范围
                filter: null, //筛选配置
                luckysheet_alternateformat_save: [], //交替颜色
                luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
                luckysheet_conditionformat_save: {}, //条件格式
                frozen: {}, //冻结行列配置
                chart: [], //图表配置
                zoomRatio: 1, // 缩放比例
                image: [], //图片
                showGridLines: 1, //是否显示网格线
                dataVerification: {}, //数据验证配置
            },
            {
                name: 'Sheet2',
                color: '',
                index: 1,
                status: 0,
                order: 1,
                celldata: [],
                config: {},
            },
            {
                name: 'Sheet3',
                color: '',
                index: 2,
                status: 0,
                order: 2,
                celldata: [],
                config: {},
            },
        ],
    };
    luckysheet.destroy();
    luckysheet.create(options);
};
onMounted(() => {
    initGrid();
});
</script>

<style lang="less" scoped>
.ant_layout {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    .layout_sider {
        display: inline-block;
        padding: 20px;
        height: 100%;
        width: 20%;
        border: 2px solid #f6f6f6;

        .sider_opertors {
            display: flex;
            justify-content: space-between;
        }
    }
    .layout_content {
        display: inline-block;
        flex: 1;
        padding: 20px;
        height: 100%;
        border: 2px solid #f6f6f6;

        .content_opertors {
            height: 32px;

            .ant-btn {
                margin-right: 16px;
            }
        }
        .content_main {
            margin-top: 15px;
            height: calc(100% - 47px);
            .content_table {
                width: 100%;
                height: 100%;
            }
            .ant-table-wrapper,
            #luckysheet_main {
                height: 100%;
            }
        }
    }
}
</style>
